<template>
  <div class="flexContent">
    <div class="top">
      <h3>订单信息</h3>
      <div class="rows">
        <!-- <span style="color: red">*</span> -->
        <span class="col">订单编号：{{ tradeNo }}</span>
        <span class="col">收货电话：{{ receiverPhone }}</span>
        <span class="col">订单金额：{{ payAmount }}</span>

      </div>
      <div class="rows">
        <span class="col">门店名称：{{ storeName }}</span>
        <span class="col">订单地址：{{ receiverRegion }}/{{ receiverAddress }}</span>
        <span class="col" v-if="entryStatus == '0' && status !== '5'">订单状态：待分录</span>
        <span class="col" v-if="status == '0' && entryStatus == '1'">订单状态：待付款</span>
        <span class="col" v-if="status == '1' && entryStatus == '1'">订单状态：待发货</span>
        <span class="col" v-if="status == '2' && entryStatus == '1'">订单状态：已发货</span>
        <span class="col" v-if="status == '3' && entryStatus == '1'">订单状态：已完成</span>
        <span class="col" v-if="status == '4' && entryStatus == '1'">订单状态：已关闭</span>
        <span class="col" v-if="status == '5'">订单状态：已退款</span>
      </div>
      <div class="rows">
        <span class="col">收货人：{{ receiverName }}</span>
        <span class="col" v-if="payType == '0'">支付方式：微信支付</span>
        <span class="col" v-if="paymentTime">支付时间：{{ paymentTime | parseTime }}</span>
        <span class="col" v-if="!paymentTime">支付时间："无"</span>
      </div>
    </div>
    <div class="table">
      <div>
        <el-table border class="tablebox" :max-height="475" :data="tableData" size="medium">
          <el-table-column label="序号" type="index" align="center" width="80" />
          <el-table-column label="商品名称" prop="commodityName" align="center" />
          <el-table-column align="center" label="配送规格" prop="deliveryNorms" />
          <el-table-column align="center" label="配送规格数量" prop="count" />
          <el-table-column align="center" label="配送规格价格" prop="normsPrice" />
          <el-table-column align="center" label="最小单位数量" prop="normsTotal" />
          <el-table-column align="center" label="最小单位售价" prop="salePrice" />
          <el-table-column align="center" label="总价" prop="total" />
        </el-table>
      </div>
    </div>
    <div class="returnBtn">
      <el-button class="celBtn" @click="returnList">返 回</el-button>
    </div>
  </div>
</template>

<script>
import { getShopOrderDetail } from "@/api/shopManagement";
export default {
  name: "SupplierOrderDetail",
  data() {
    return {
      tableData: [],
      supplierId: "",
      tradeNo: "",
      receiverPhone: "",
      payAmount: "",
      storeName: "",
      receiverAddress: "",
      receiverRegion: '',
      status: null,
      entryStatus: '',
      payType: '',
      receiverName: null,
      paymentTime: null,
    };
  },
  created() {
    this.supplierId = this.$route.query.id ? this.$route.query.id : "";
    console.log(this.supplierId);
    this.getShopOrderDetail();
  },
  methods: {
    returnList() {
      this.closeTag({ path: "shopOrderList" });
    },
    async getShopOrderDetail() {
      const res = await getShopOrderDetail({ id: this.supplierId });
      if (res.code === 200) {
        this.tableData = res.data.detailsList;
        this.tradeNo = res.data.tradeNo;
        this.receiverPhone = res.data.receiverPhone;
        this.payAmount = res.data.payAmount;
        this.storeName = res.data.storeName;
        this.receiverAddress = res.data.receiverAddress;
        this.receiverRegion = res.data.receiverRegion;
        this.status = res.data.status;
        this.payType = res.data.payType;
        this.entryStatus = res.data.entryStatus;
        this.receiverName = res.data.receiverName;
        this.paymentTime = res.data.paymentTime;
        console.log(res.data);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.flexContent {
  .top {
    h3 {
      margin: 0;
      margin-bottom: 10px;
    }

    .rows {
      display: flex;
      margin-bottom: 20px;

      .col {
        width: 33%;
      }
    }
  }
}
</style>
